<template>
	<view class="section">
		<view class="list" @click="toDetail" data-id="3" :data-number="info.badges.comment+info.badges.answer">
			<view class="imageBox">
				<image mode="widthFix" src="../static/sns/message_comment@2x.png" />
			</view>
			<view class="info">
				<view class="infoDetail">
					<text class="title">评论</text>
				</view>
				<view class="infoDetail">
					<view :class="{number:(info.badges.comment+info.badges.answer)}" v-if="info.badges.comment+info.badges.answer">{{info.badges.comment+info.badges.answer}}</view>
					<view v-else class="no-number">0</view>
					<view class="rightImg">
						<image src="../static/sns/ic_arrow_smallgrey.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="list" @click="toDetail" data-id="2" :data-number="info.badges.like">
			<view class="imageBox">
				<image mode="widthFix" src="../static/sns/message_zan@2x.png" />
			</view>
			<view class="info">
				<view class="infoDetail">
					<text class="title">点赞</text>
				</view>
				<view class="infoDetail">
					<view :class="{number:info.badges.like}" v-if="info.badges.like">{{info.badges.like}}</view>
					<view v-else class="no-number">0</view>
					<view class="rightImg">
						<image src="../static/sns/ic_arrow_smallgrey.png" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		$storage
	} from "@/utils";
	export default {
		data() {
			return {
				info: {},
				remove: false
			};
		},
		created: function() {
			console.log("created");
		},
		mounted: function() {},
		onShow: function() {
			uni.showTabBar();
			if (this.remove) {
				this.getList();
			}
		},
		onLoad: function(e) {
			uni.$on('after:notification', () => {
				this.remove = true
			})
			this.getList();
		},
		methods: {
			async getList() {
				const token = $storage.get("accessToken");
				const user = $storage.get("user") || {};
				if (token) {
					const info = await this.$u.api.getNewsList();
					this.info = info;
				}
			},
			async toDetail(e) {
				// await checkAuth()
				const id = e.currentTarget.dataset.id;
				const number = e.currentTarget.dataset.number;
				if (id == 1) {
					uni.navigateTo({
						url: `/mine/newsDetail?id=${id}&number=${number}`,
					});
				}
				if (id < 4 && id > 1) {
					uni.navigateTo({
						url: `/mine/newsDetail?id=${id}&number=${number}`,
					});
				} else {
					// wx.navigateTo({
					//   url: `/mall/order/order?id=${id}&number=${number}`,
					// })
				}
			},
		},
	};
</script>

<style lang="scss">
	@import "../var.scss";

	.header {
		font-weight: bold;
		font-size: 36rpx;
	}

	.section {
		padding: 0rpx 30rpx;

		.search {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 54rpx;
			color: $info-color;
			background-color: #f2f2f2;
			border-radius: 10rpx;

			image {
				width: 20rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}

		.list {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 28rpx 0rpx;
			border-bottom: 1rpx solid #f6f6f6;

			.imageBox {
				width: 76rpx;
				height: 76rpx;
				background-color: $img-color;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				display: flex;
				// flex: 1;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				// flex-wrap: wrap;
				padding-left: 30rpx;

				.infoDetail {
					display: flex;
					// justify-content: space-between;
					// width: 100%;
					font-size: 24rpx;

					.title {
						color: #001432;
						font-weight: 700;
						font-size: 34rpx;
					}

					.time {
						color: #b3b3b3;
					}

					.content {
						margin-top: 5rpx;
						color: #808080;
					}

					.number {
						// height: 28rpx;
						// margin-top: 5rpx;
						margin-right: 20rpx;
						padding: 5rpx 15rpx;
						color: #fff;
						// line-height: 28rpx;
						// text-align: center;
						background-color: #f73c52;
						font-size: 20rpx;
						border-radius: 50%;
					}

					.no-number {
						margin-right: 20rpx;
						padding: 5rpx 15rpx;
						color: #8c96a5;
						// line-height: 28rpx;
						// text-align: center;
						background-color: #f4f4f6;
						font-size: 20rpx;
						border-radius: 20rpx;
					}

					.rightImg {
						width: 35rpx;
						height: 35rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.topIcon {
		width: 35rpx;
		height: 35rpx;
		// background-color: yellow;
		z-index: 9;
		position: absolute;
		left: 30rpx;
		top: 120rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
